<template>
  <div class="groups-page">
    <el-row>
      <el-col :span="6">
        <el-card class="groups-list">
          <div slot="header" class="clearfix">
            <el-input v-model="searchQuery" placeholder="搜索群组" @input="searchGroups" clearable />
            <el-button type="primary" @click="addGroup">新增群组</el-button>
          </div>
          <el-menu class="el-menu-vertical-demo" :default-active="activeMenu" @select="viewGroupDetails">
            <el-menu-item v-for="group in filteredGroups" :key="group.id" :index="group.id.toString()">
              <span class="group-name">{{ group.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="group-chat-box">
          <div slot="header" class="clearfix">
            <span>{{ currentGroup ? currentGroup.name : '选择一个群组开始聊天' }}</span>
            <el-button @click="viewGroupMembers" v-if="currentGroup">查看成员</el-button>
            <el-button @click="viewGroupActivities" v-if="currentGroup">查看活动</el-button>
          </div>
          <div class="group-messages">
            <div v-for="message in groupMessages" :key="message.id" :class="{'message': true, 'self-message': message.self}">
              <el-avatar :src="message.avatar" :class="{'self-avatar': message.self}" />
              <div class="message-content">
                <span class="message-username">{{ message.username }}</span>
                <p v-if="!message.image">{{ message.content }}</p>
                <img v-if="message.image" :src="message.image" alt="uploaded image" class="uploaded-image"/>
                <span class="message-time">{{ message.time }}</span>
              </div>
            </div>
          </div>
          <div class="input-area">
            <el-input v-model="newGroupMessage" placeholder="输入消息..." @keyup.enter="sendGroupMessage">
              <template #append>
                <el-button @click="sendGroupMessage">发送</el-button>
              </template>
            </el-input>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-success="handleGroupUploadSuccess"
              :file-list="groupFileList"
              list-type="picture"
              :show-file-list="false">
              <el-button icon="el-icon-upload" class="upload-button">上传图片</el-button>
            </el-upload>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 查看成员的对话框 -->
    <el-dialog :visible.sync="membersDialogVisible" title="群组成员">
      <el-table :data="groupMembers">
        <el-table-column prop="name" label="成员名" />
        <el-table-column prop="role" label="角色" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="membersDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 查看活动的对话框 -->
    <el-dialog :visible.sync="activitiesDialogVisible" title="群组活动">
      <el-table :data="groupActivities">
        <el-table-column prop="name" label="活动名" />
        <el-table-column prop="date" label="日期" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="activitiesDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      groups: [
        { id: 1, name: '篮球爱好者' },
        { id: 2, name: '足球俱乐部' },
        { id: 3, name: '羽毛球协会' },
      ],
      searchQuery: '',
      filteredGroups: [],
      groupMessages: [],
      newGroupMessage: '',
      currentGroup: null,
      groupFileList: [],
      activeMenu: '',
      membersDialogVisible: false,
      activitiesDialogVisible: false,
      groupMembers: [],
      groupActivities: [],
    };
  },
  mounted() {
    this.filteredGroups = this.groups;
  },
  methods: {
    searchGroups() {
      if (this.searchQuery) {
        this.filteredGroups = this.groups.filter(group => group.name.includes(this.searchQuery));
      } else {
        this.filteredGroups = this.groups;
      }
    },
    viewGroupDetails(groupId) {
      this.currentGroup = this.groups.find(group => group.id.toString() === groupId);
      this.groupMessages = [
        // Fetch messages from this group from server
        { id: 1, username: 'whm', avatar: 'src/assets/images/whm.png', content: '大家好', time: '2024-06-27 10:00', self: false },
        { id: 2, username: 'User', avatar: 'src/assets/images/wl.png', content: '你好', time: '2024-06-27 10:05', self: true },
      ];
    },
    sendGroupMessage() {
      if (this.newGroupMessage.trim() === '') return;
      this.groupMessages.push({
        id: Date.now(),
        username: 'YourName', // Replace with actual user name
        avatar: 'https://example.com/your-avatar.jpg', // Replace with actual user avatar
        content: this.newGroupMessage,
        time: new Date().toLocaleString(),
        self: true,
      });
      this.newGroupMessage = '';

      // Simple auto-reply functionality
      setTimeout(() => {
        this.groupMessages.push({
          id: Date.now(),
          username: '张三', // Replace with actual bot name
          avatar: 'https://example.com/avatar1.jpg', // Replace with actual bot avatar
          content: '这是一个自动回复消息', // Replace with actual bot message
          time: new Date().toLocaleString(),
          self: false,
        });
      }, 1000);
    },
    handleGroupUploadSuccess(response, file) {
      this.groupMessages.push({
        id: Date.now(),
        username: 'YourName', // Replace with actual user name
        avatar: 'https://example.com/your-avatar.jpg', // Replace with actual user avatar
        image: URL.createObjectURL(file.raw),
        time: new Date().toLocaleString(),
        self: true,
      });
    },
    addGroup() {
      this.$router.push('/social/addgroup');
    },
    viewGroupMembers() {
      this.membersDialogVisible = true;
      this.groupMembers = [
        // Fetch members from the server, for now we'll use dummy data
        { id: 1, name: 'wulong', avatar: 'src/assets/images/wl.png' },
        { id: 2, name: 'Gleak', avatar: 'src/assets/images/wx.png' },
        { id: 3, name: 'whm', avatar: 'src/assets/images/whm.png' },
      ];
    },
    viewGroupActivities() {
      this.activitiesDialogVisible = true;
      this.groupActivities = [
        // Fetch activities from the server, for now we'll use dummy data
        { name: '篮球比赛', date: '2024-07-01' },
        { name: '足球训练', date: '2024-07-05' },
      ];
    },
  },
};
</script>



<style>
.groups-page {
  padding: 20px;
}

.groups-list {
  height: 100%;
  overflow-y: auto;
}

.group-name {
  margin-left: 10px;
}

.group-chat-box {
  height: 100%;
}

.group-messages {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  background-color: #f5f5f5;
}

.message {
  display: flex;
  margin-bottom: 10px;
}

.self-message {
  justify-content: flex-end;
  text-align: right;
}

.self-message .message-content {
  margin-right: 10px;
}

.message-content {
  margin-left: 10px;
}

.message-username {
  font-weight: bold;
}

.message-time {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

.uploaded-image {
  max-width: 100px;
  max-height: 100px;
}

.input-area {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.upload-button {
  margin-left: 10px;
}

.self-avatar {
  order: 2;
}
</style>
